﻿

@{
    Layout = "~/Views/Shared/_pg.cshtml";
}
@model List<DataAccess.Models.ProductClass>
<div class="row" id="vm">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <div class="main-box clearfix">
                    <header class="main-box-header clearfix">
                        <h2><span class="emerald">产品库</span></h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="search-form">
                            <div class="input-group">
                                <input type="text" id="search" placeholder="输入关键词查找推广产品" class="form-control input-lg" />
                                <div class="input-group-btn">
                                    <button class="btn btn-lg btn-primary" type="button" v-on:click="search">
                                        <i class="fa fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="main-top">
                            <div class="goods-type-filter">
                                <div class="goods-type">
                                    <div class="goods-type-main" id="shopclass">
                                        @foreach (var item in Model)
                                        {
                                            <span><a href="#" onclick="ClassSearch(@item.ID,this)">@item.Name<b> (@item.Count) </b></a></span>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="goods-pages">
                                <div class="goods-pages-fil clearfix">
                                    <span data-px="zh" id="zhonghe" class="pxclick cur" onclick="Order(1,this)"><a href="javascript:void(0);">综合</a></span>
                                    <span data-px="zx" class="pxclick " onclick="Order(2, this)"><a href="javascript:void(0);">最新</a></span>
                                    <span data-px="sell" class="pxclick " onclick="Order(3, this)"><a href="javascript:void(0);">销量</a></span>
                                    <span data-px="yjdown" class="pxclick " onclick="Order(4, this)"><a href="javascript:void(0);">佣金比例</a></span>
                                    <span data-px="jgup" class="pxclick " onclick="Order(5, this)"><a href="javascript:void(0);">价格</a></span>
                                </div>
                            </div>
                        </div>

                        <ul id="search-results">
                            <li></li>
                            <li >
                                <table class="table table-products table-hover" >
                                    <tr v-for="(item,index)  in List" id="productlist">
                                        <td>
                                            <img v-bind:src="item.pictUrl" width="100px" height="100px" alt="" />
                                        </td>
                                        <td>
                                            <span class="name">{{item.title.trim()}}</span>
                                            <span class="price">
                                                <i class="fa fa-money"></i>原  价<spn class="Original">￥{{item.zkPrice}}</spn><br />
                                                <i class="fa  fa-calendar"></i>券后价<span class="label label-danger">￥{{item.Price}}</span>
                                            </span>
                                            <span class="warranty">
                                                <input type="button" value="选取" v-on:click="xuanqu(item.auctionId)" v-bind:id="item.auctionId" class="btn btn-default" />
                                                @*<button   class="btn btn-default progress-button mrg-b-lg">
                                                    选取
                                                </button>*@
                                            </span>
                                        </td>
                                    </tr>

                                   
                                </table>

                            
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<a href="javascript:void(0)" style="border-radius: 50%; color: #eeeeee; display: block; height: 5.8rem; line-height: 5.8rem; width: 5.8rem; 
     background-size: 5.45rem; position: fixed; left: 0.3rem; bottom: 4.9rem; z-index: 1001; animation: menuAn 2s; -webkit-animation:;">
    <input type="button" id="productcount" value="确定使用（0）" class="btn btn-danger btn-lg" /></a>

@section Scripts{
    <link rel="stylesheet" type="text/css" href="/css/quan_index.css">
    <script src="/Scripts/sys/lib/common_raw.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
    <script src="/Scripts/plugins/layer/layer.min.js"></script>
    <script src="~/js/popModal.min.js"></script>
    <link href="~/css/popModal.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#vm",
            data: {
                maxCount: "1",
                List: [],
            },
            methods: {
                search: function () {
                    SearchWord = $.trim($("#search").val());
                    cid = 0;
                    CurrentIndex = 0;
                    UpdateOrder();
                    $("#shopclass").find("span").removeClass("label-large").removeClass("label-danger");
                    //$("#productlist").html("");
                    vm.List=[];
                    list();

                }
            }
        })

        var cid = 0;
        var SearchWord = "";
        var CurrentIndex = 0;
        var orderby = 0;
        document.onkeydown = function () {
            if (event.keyCode == 13) {
                if ($.trim($("#search").val()) != "") {
                    SearchWord = $.trim($("#search").val());
                    cid = 0;
                    CurrentIndex = 0;
                    UpdateOrder();
                    $("#shopclass").find("span").removeClass("label-large").removeClass("label-danger");
                    //$("#productlist").html("");
                    vm.List=[];
                    list();

                }
            }
        }
        function ClassSearch(b, b2) {

            $("#shopclass").find("span a").removeClass("red");
            $(b2).addClass("red");
            UpdateOrder();
            CurrentIndex =0;
            cid = b;
            SearchWord = "";
            $("#search").val("");
            vm.List=[];
            //$("#productlist").html("");
            list();
        }
        function list() {

            common.invokeApi(
                    "post",
                    "/Product/GetProducts?offset=" + (CurrentIndex+1) + "&cid=" + cid + "&key=" + (encodeURIComponent(SearchWord)) + "&oid=" + orderby,
                     {},
                    function () { },
                    function (data) {
                        if (data.rows.CurrentPageList != null) 
                        {
                            vm.maxCount = data.rows.Total;
                            for (var i = 0; i < data.rows.CurrentPageList.length; i++) 
                            {
                                vm.List.push(data.rows.CurrentPageList[i]);
                            }
                        }
                    },
                    function (data) {
                        common.msg(data.Message, 2, function () { });
                    },
                    function () { }
                    );
        }
        $(function () {

            list();
        });
        function scrollFn()
        {

            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if (pageHeight - viewportHeight - scrollHeight < 1) {
                var totalPages = Math.ceil(vm.maxCount / 20);
                CurrentIndex++;
                if (CurrentIndex > totalPages) {
                    return;
                }

                list();
            }
        }
        window.addEventListener("scroll", scrollFn);

        function UpdateOrder() {
            $(".goods-pages-fil").find("span").removeClass("cur");
            $("#zhonghe").addClass("cur");
            orderby = 0;
        }
        function Order(id, obj) {
            $(".goods-pages-fil").find("span").removeClass("cur");
            $(obj).addClass("cur");
            $(".goods-pages-fil").find("span").each(function ()
            {
                if($(this).attr("data-px")=="sell"){
                    $(this).find("a").html("销量");
                }
                if($(this).attr("data-px")=="yjdown"){
                    $(this).find("a").html("佣金比例");
                }
                if($(this).attr("data-px")=="jgup"){
                    $(this).find("a").html("价格");
                }
            })
            vm.List=[];
            //$("#productlist").html("");
            switch (id) {
                case 3:
                    $(obj).find("a").html("销量从高到底");
                    break;
                case 4:
                    $(obj).find("a").html("佣金比例从高到底");

                    break;
                case 5:
                    $(obj).find("a").html("价格从低到高");
                    break;
            }
            CurrentIndex = 0;
            orderby = id;
            list();
        }
       
        var count=0;
        var productListID="";
        function xuanqu(id)
        {
            if($("#"+id).val()=="已选")
            {
                $("#"+id).addClass('btn-default');
                $("#"+id).removeClass ("btn-success");
                $("#"+id).val("选取");
                productListID=productListID.replace(id,"");
                count--;
            }else{
                $("#"+id).removeClass('btn-default');
                $("#"+id).addClass("btn-success");
                $("#"+id).val("已选");
                productListID+=id+",";
                count++;
            }
            $("#productcount").val('');
            
            $("#productcount").val("确定使用【已选商品（"+count.toString()+"）件】");
            productListID=productListID.replace(/\,,/g, ",")
            productListID=productListID==","?"":productListID;
            parent.$('#productid').val(productListID);
        }

       
        //关闭iframe
        $('#productcount').click(function(){
          
     
            parent.layer.closeAll();
        });

    </script>
}





